<template>
  <div>
    <el-dialog
      title="添加门店"
      :visible="open"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="1000px"
      append-to-body
      @close="cancel()"
    >
      <el-card class="box-card">
        <div class="flex item">
          <div class="lable">大区名称:</div>
          {{ region.regionName }}
        </div>
      </el-card>
      <el-form
        style="margin-top: 20px"
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="72px"
      >
        <el-form-item label="门店名称" prop="schoolName">
          <el-input
            v-input-restrict
            v-model="queryParams.schoolName"
            placeholder="请输入门店名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item>
          <el-button
            v-preventReClick
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button
            v-preventReClick
            icon="el-icon-refresh"
            size="mini"
            @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>

      <el-table
        v-loading="loading"
        :data="list"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          width="200"
          property="schoolName"
          label="门店名称"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          width="200"
          property="tagName"
          label="门店类型"
        ></el-table-column>
        <el-table-column align="center" label="门店地址">
          <template slot-scope="scope">
            <div>{{ scope.row.schoolArea + scope.row.schoolAddress }}</div>
          </template>
        </el-table-column></el-table
      >
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <div
        slot="footer"
        class="dialog-footer"
        style="display: flex; justify-content: flex-end"
      >
        <el-button v-preventReClick type="primary" @click="submitForm"
          >确 定</el-button
        >
        <el-button v-preventReClick @click="cancel">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
      
<script>
import { listPost_school, batchBindRegion } from "@/api/school/list";
export default {
  props: {
    open: Boolean,
    region: Object,
  },
  data() {
    return {
      selectedRows: [],
      total: 0,
      loading: false,
      list: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        schoolName: undefined,
        isMainSchool: 0,
      },
    };
  },
  watch: {
    open(e) {
      if (e) {
        this.resetQuery();
      }
    },
  },
  mounted() {},
  methods: {
    async submitForm() {
      if (this.selectedRows.length == 0) {
        // 请选择门店
        this.$message({
          message: "请选择门店",
          type: "warning",
        });
        return;
      }
      try {
        let res = await batchBindRegion({
          schoolIds: this.selectedRows.map((item) => item.schoolId).join(","),
          regionId: this.region.regionId,
        });
        if (res.code == 200) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.$emit("update:open", false);
          this.$emit("refresh");
        }
      } catch (error) {}
    },
    handleSelectionChange(selection) {
      this.selectedRows = selection;
      // 在这里处理用户勾选行的操作
      console.log("Selected Rows:", this.selectedRows);
    },
    async getList() {
      let query = { ...this.queryParams };
      query.regionId = 9999;
      let res = await listPost_school(query);
      this.list = res.rows;
      this.total = res.total;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    cancel() {
      this.$emit("update:open", false);
    },
  },
};
</script>
    <style scoped lang="scss">
.item {
  margin-bottom: 5px;
  .lable {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: rgba(96, 98, 102, 1);
  }
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: black;
}
</style>
      